<html>

<!--

Timestamp Converter
Copyright (c) 2007, 2009 by Ildar Shaimordanov

-->

<head>
<HTA:APPLICATION ID="oHTA"
  APPLICATIONNAME="Timestamp Converter"
  BORDER="dialog"
  BORDERSTYLE="normal"
  CAPTION="yes"
  CONTEXTMENU="no"
  ICON=""
  INNERBORDER="no"
  MAXIMIZEBUTTON="no"
  MINIMIZEBUTTON="yes"
  NAVIGABLE="no"
  SCROLL="no"
  SCROLLFLAT="no"
  SELECTION="no"
  SHOWINTASKBAR="yes"
  SINGLEINSTANCE="yes"
  SYSMENU="yes"
  VERSION="1.0"
  WINDOWSTATE="normal" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Timestamp Converter</title>
<style type="text/css">

*	{
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	font-size: 12px;
}

body	{
	margin: 0;
	padding: 0;
}

#body	{
	background-color: #ccc;
	height: 300px;
	padding-left: 2px;
	padding-right: 2px;
	width: 420px;
}

form	{
	padding: 0;
}

fieldset	{
	margin: 5px 0;
	padding: 5px;
}

fieldset div.label	{
	float: left;
	padding-right: 2px;
	text-align: right;
	width: 85px;
}

fieldset div.panel	{
	margin-bottom: 5px;
}

#timestamp-view	{
}

#timestamp-view input#T	{
	width: 300px;
}

#human-friendly-view	{
}

#human-friendly-view input.xf_spinbutton_value	{
	width: 90px;
}

#human-friendly-view select	{
	width: 102px;
}

#formatted-view	{
}

#formatted-view input,
#formatted-view select	{
	width: 100%;
}


</style>
<style type="text/css">

div.xf_spinbutton_frame {
	display: inline;
	padding-right: 12px;
	position: relative;
}

div.xf_spinbutton_frame input.xf_spinbutton_value {
	text-align: right;
}

div.xf_spinbutton_frame input.xf_spinbutton_up,
div.xf_spinbutton_frame input.xf_spinbutton_down {
	font-size: 4px;
	margin: 0;
	padding: 0;
	position: absolute;
	width: 12px;
}

div.xf_spinbutton_frame input[type="button"]	{
	right: 0;
}

div.xf_spinbutton_frame input.xf_spinbutton_up {
	margin-bottom: 10px;
}

div.xf_spinbutton_frame input.xf_spinbutton_down {
	margin-top: 11px !important;
	margin-top: 12px;
}

</style>
<script type="text/javascript" src="js/Date.js"></script>
<script type="text/javascript" src="js/String.js"></script>
<script type="text/javascript" src="js/web/XHTMLDOM.utils.SpinButton.js"></script>
<script type="text/javascript">

(function()
{

/**
 * Common behavior callback for all spinbuttons
 */
var behavior = function(el, options)
{
	// Prevent duplicated changes of fields
	if ( behavior.again ) {
		behavior.again = false;
		return;
	}
	behavior.again = true;

	switch ( el.id ) {
	case 'T':
		var here = new Date(behavior.T.getValue() * 1000);
		if ( ! here ) {
			return;
		}

		behavior.Y.updateValue(here.getFullYear());
		behavior.M.selectedIndex = here.getMonth();
		behavior.D.updateValue(here.getDate());

		behavior.hh.updateValue(here.getHours());
		behavior.mm.updateValue(here.getMinutes());
		behavior.ss.updateValue(here.getSeconds());
		break;
	case 'Y':
	case 'M':
		behavior.updateTimestamp(true);
		break;
	case 'D':
	case 'hh':
	case 'mm':
	case 'ss':
		behavior.updateTimestamp();
		break;
	}
};

/**
 * Updater for the formatted time view
 */
behavior.updateFormat = function()
{
	var here = new Date(behavior.T.getValue() * 1000);

	var bfo = behavior.formatter.options;
/*
	var format = bfo[bfo.selectedIndex].text
		.replace('YYYY',  here.getFullYear())
		.replace('MMM',   here.getMonthShortName())
		.replace('MM',   (here.getMonth() + 1).dec(2, '0'))
		.replace('DD',    here.getDate().dec(2, '0'))
		.replace('hh',    here.getHours().dec(2, '0'))
		.replace('h',     here.getHours() <= 12 ? here.getHours() : here.getHours() - 12)
		.replace('mm',    here.getMinutes().dec(2, '0'))
		.replace('ss',    here.getSeconds().dec(2, '0'))
		.replace('TZ',    here.getTZ())
		.replace('DT',    here.getDaytime());

	behavior.formatted.value = format;
*/

	behavior.formatted.value = Date.format(bfo[bfo.selectedIndex].value, here);
	behavior.formatter.blur();
};

/**
 * Updater for the timestamp view
 */
behavior.updateTimestamp = function(fixLastDayOfMonth)
{
	var here = new Date(
		behavior.Y.getValue(), 
		behavior.M.selectedIndex, 
		behavior.D.getValue(), 
		behavior.hh.getValue(), 
		behavior.mm.getValue(), 
		behavior.ss.getValue(), 
		0);
	if ( fixLastDayOfMonth ) {
		behavior.D.updateOptions({
			max: here.getDaysInMonth()
		});
	}
	behavior.T.updateValue(parseInt(here.getTime() / 1000));

	behavior.updateFormat();
};

/**
 * Initialize of the formatted time view
 */
function initFormat()
{
	behavior.formatter = document.getElementById('formatter');
	behavior.formatted = document.getElementById('formatted');

	if ( document.attachEvent ) {
		behavior.formatter.attachEvent('onchange', behavior.updateFormat);
	} else {
		behavior.formatter.addEventListener('change', behavior.updateFormat, true);
	}
};

/**
 * Initialize of all spinbuttons
 */
function initSpinbuttons()
{
	var now = new Date();

	if ( ! initSpinbuttons.initialized ) {
		// Prevent the double initialization of the view
		initSpinbuttons.initialized = true;

		// Timestamp
		behavior.T = new XHTMLDOM.utils.Spinbutton(document.getElementById('T'), {
			rotate: 1, 
			behavior: behavior
		});

		// Year
		behavior.Y = new XHTMLDOM.utils.Spinbutton(document.getElementById('Y'), {
			value: now.getFullYear(),
			rotate: 1,
			behavior: behavior
		});

		// Month
		behavior.M = document.getElementById('M');
		behavior.M.onchange = function()
		{
			behavior(behavior.M);
		};

		// Date
		behavior.D = new XHTMLDOM.utils.Spinbutton(document.getElementById('D'), {
			value: now.getDate(),
			min: 1,
			max: now.getDaysInMonth(),
			rotate: 1, 
			behavior: behavior
		});

		// Hours
		behavior.hh = new XHTMLDOM.utils.Spinbutton(document.getElementById('hh'), {
			value: now.getHours(),
			min: 0, 
			max: 23, 
			rotate: 1,
			behavior: behavior
		});

		// Minutes
		behavior.mm = new XHTMLDOM.utils.Spinbutton(document.getElementById('mm'), {
			value: now.getMinutes(),
			min: 0, 
			max: 59, 
			rotate: 1,
			behavior: behavior
		});

		// Seconds
		behavior.ss = new XHTMLDOM.utils.Spinbutton(document.getElementById('ss'), {
			value: now.getSeconds(),
			min: 0, 
			max: 59, 
			rotate: 1,
			behavior: behavior
		});
	}

	behavior.T.updateValue(parseInt(now.getTime() / 1000));
};

/**
 * Initialize the frame of application. Create the window and show it
 */
function initWin()
{
	initFormat();
	initSpinbuttons();
};

/**
 * Initialize the standalone HTA
 */
function initHta()
{
	// set the window size
	var w = 420, h = 300;
	window.moveTo((window.screen.width - w) / 2, (window.screen.height - h) / 2);
	window.resizeTo(w, h);

	// initialize the timestamp converter
	initWin();
};

/**
 * Handles keystrokes (for HTA only)
 */
function handleKeydown(e)
{
	var e = e || event;

	// F5
	if ( e.keyCode == 116 ) {
		initWin();
		return false;
	}

	// Esc
	if ( e.keyCode == 27 ) {
		window.close();
		return false;
	}
};

if ( window.attachEvent ) {
	if ( window.oHTA && oHTA.applicationName ) {
		window.attachEvent('onload', initHta);
		document.attachEvent('onkeydown', handleKeydown);
	} else {
		window.attachEvent('onload', initWin);
	}
} else {
	window.addEventListener('load', initWin, true);
}

})();

</script>
</head>

<body>

<div id="body">

<form action="" onsubmit="return false">

<h1 style="font-size: 1.2em; margin: 0;">Timestamp Converter</h1>
<div style="font-size: 9px;">Copyright &copy; 2007, 2009 by Ildar Shaimordanov</div>

<fieldset id="timestamp-view">
<legend>Timestamp view</legend>
	<div class="label">Timestamp: </div>
	<input type="text" id="T" />
</fieldset>

<fieldset id="human-friendly-view">
<legend>Human-friendly view</legend>

<div class="panel">
	<div class="label">Date: </div>
	<input type="text" id="Y" />

	<select id="M">
	<option>January</option>
	<option>February</option>
	<option>March</option>
	<option>April</option>
	<option>May</option>
	<option>June</option>
	<option>July</option>
	<option>August</option>
	<option>September</option>
	<option>October</option>
	<option>November</option>
	<option>December</option>
	</select>

	<input type="text" id="D" />
</div>

<div class="panel">
	<div class="label">Time: </div>
	<input type="text" id="hh" />
	<input type="text" id="mm" />
	<input type="text" id="ss" />
</div>
</fieldset>

<fieldset id="formatted-view">
<legend>Formatted view</legend>
	<select id="formatter">
	<option value="%b %d, %Y %H:%M:%S %z">MMM DD, YYYY hh:mm:ss TZ</option>
	<option value="%Y/%m/%d %H:%M:%S">YYYY/MM/DD hh:mm:ss</option>
	<option value="%d.%m.%Y %H:%M:%S">DD.MM.YYYY hh:mm:ss</option>
	<option value="%d-%m-%Y %H:%M:%S">DD-MM-YYYY hh:mm:ss</option>
	<option value="%d-%m-%Y">DD-MM-YYYY</option>
	<option value="%d.%m.%Y">DD.MM.YYYY</option>
	<option value="%d %b %Y">DD MMM YYYY</option>
	<option value="%b %d %Y">MMM DD YYYY</option>
	<option value="%H:%M:%S">hh:mm:ss</option>
	<option value="%I:%M:%S %p">h:mm:ss DT</option>
	</select>

	<input type="text" id="formatted" readonly="readonly" />
</fieldset>

</form>

</div>

</body>
</html>
